<template>
  <div class="titleSubTitleSwitchItem">
    <div class="left">
      <div class="title">{{ this.title }}</div>
      <div class="subtitle">{{ this.subtitle }}</div>
    </div>
    <my-switch
      class="switch"
      :checkedProps="this.isChecked"
      @change="valueChange"
    >
    </my-switch>
  </div>
</template>
<script>
import MySwitch from "../MySwitch.vue";
export default {
  components: {
    MySwitch,
  },
  props: {
    titlePro: {
      type: String,
      default: "",
    },
    subtitlePro: {
      type: String,
      default: "",
    },
    isCheckedPro: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isChecked: false,
      title: "",
      subtitle: "",
    };
  },
  mounted() {
    this.title = this.titlePro;
    this.subtitle = this.subtitlePro;
    this.isChecked = this.isCheckedPro;
  },
  watch: {
    titlePro(newVal) {
      this.title = newVal;
    },
    subtitlePro(newVal) {
      this.subtitle = newVal;
    },
    isCheckedPro(newVal) {
      this.isChecked = newVal;
    },
  },
  methods: {
    valueChange(newValue) {
      this.isChecked = newValue;
      this.$emit("switchChange", this.isChecked);
    },
  },
};
</script>
<style scoped>
.titleSubTitleSwitchItem {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 64px;
  width: 100%;
  align-items: center;
}

.titleSubTitleSwitchItem .left {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.titleSubTitleSwitchItem .left .title {
  font-size: 16px;
  color: var(--current-primary-color);
}
.titleSubTitleSwitchItem .left .subtitle {
  font-size: 12px;
  color: var(--current-second-title-color);
  margin-top: 2px;
}

.titleSubTitleSwitchItem .switch {
  margin-right: 0px;
}
</style>
